﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <base href="/netctoss/"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>NetCTOSS</title>
        <link type="text/css" rel="stylesheet" media="all" href="styles/global.css" />
        <link type="text/css" rel="stylesheet" media="all" href="styles/global_color.css" /> 
        <script language="javascript" type="text/javascript">
            //显示角色详细信息
            // function showDetail(flag, a) {
            //     var detailDiv = a.parentNode.getElementsByTagName("div")[0];
            //     if (flag) {
            //         detailDiv.style.display = "block";
            //     }
            //     else
            //         detailDiv.style.display = "none";
            // }
            // //删除
            // function deleteAccount() {
            //     var r = window.confirm("确定要删除此业务账号吗？删除后将不能恢复。");
            //     document.getElementById("operate_result_info").style.display = "block";
            // }
            // //开通或暂停
            // function setState() {
            //     var r = window.confirm("确定要开通此业务账号吗？");
            //     document.getElementById("operate_result_info").style.display = "block";
            // }
        </script>
        <script type="text/javascript" src="js/jquery/jquery.js"></script>
        <script type="text/javascript" src="js/vue/vue.js"></script>
        <script type="text/javascript" src="js/vue/axios.js"></script>
        <script type="text/javascript" src="js/layer/layer.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#headerAndNavi").load("common/header.html")
            })
        </script>

    </head>
    <body>
        <!--Logo区域开始-->
        <div id="headerAndNavi">

        </div>
        <!--Logo区域结束-->
        <!--主要区域开始-->
        <div id="main">
            <form action="" method="">
                <!--查询-->
                <div class="search_add">                        
                    <div>OS 账号：<input type="text" value="" class="width100 text_search" v-model="condition.osUsername"/></div>
                    <div>服务器 IP：<input type="text" value="" class="width100 text_search"  v-model="condition.unixHost"/></div>
                    <div>身份证：<input type="text"  value="" class="text_search"  v-model="condition.AccountIdcardNo"/></div>
                    <div>状态：
                        <select class="select_search"  v-model="condition.serviceStatus">
                            <option value="">全部</option>
                            <option value="0">开通</option>
                            <option value="1">暂停</option>
                            <option value="2">删除</option>
                        </select>
                    </div>
                    <div><input type="button" value="搜索" class="btn_search" @click="select(1,5)"/></div>
                    <input type="button" value="增加" class="btn_add" @click="insert" />
                </div>  
                <!--删除的操作提示-->
                <div id="operate_result_info" class="operate_success">
                    <img src="images/close.png" onclick="this.parentNode.style.display='none';" />
                    删除成功！
                </div>   
                <!--数据区域：用表格展示数据-->     
                <div id="data">            
                    <table id="datalist">
                    <tr>
                        <th class="width50">业务ID</th>
                        <th class="width70">账务账号ID</th>
                        <th class="width150">身份证</th>
                        <th class="width70">姓名</th>
                        <th>OS 账号</th>
                        <th class="width50">状态</th>
                        <th class="width100">服务器 IP</th>
                        <th class="width100">资费</th>                                                        
                        <th class="width200"></th>
                    </tr>
                    <tr v-for="(service,index) in result.list">
                        <td><a  href="javascirpt:;" @click="detail(service)" title="查看明细">{{service.serviceId}}</a></td>
                        <td>{{service.accountId}}</td>
                        <td>{{service.accountIdcardNo}}</td>
                        <td>{{service.accountRealName}}</td>
                        <td>{{service.osUsername}}</td>
                        <td v-if="service.serviceStatus==0">开通</td>
                        <td v-else-if="service.serviceStatus==1">暂停</td>
                        <td v-else-if="service.serviceStatus==2">删除</td>
                        <td v-else-if="service.serviceStatus==null"></td>
                        <td>{{service.unixHost}}</td>
                        <td>
                            <a class="summary"  onmouseover="showDetail(true,this);" onmouseout="showDetail(false,this);">{{service.costName}}</a>
                            <!--浮动的详细信息-->
                            <div class="detail_info">
                                {{service.costDescr}}
                            </div>
                        </td>                            
                        <td class="td_modi">
                            <input type="button" value="暂停" class="btn_pause" onclick="setState();" />
                            <input type="button" value="修改" class="btn_modify" @click="toUpdate(service)" />
                            <input type="button" value="删除" class="btn_delete" @click="deleteOne(service)" />
                        </td>
                    </tr>

                </table>                
                <p>业务说明：<br />
                1、创建即开通，记载创建时间；<br />
                2、暂停后，记载暂停时间；<br />
                3、重新开通后，删除暂停时间；<br />
                4、删除后，记载删除时间，标示为删除，不能再开通、修改、删除；<br />
                5、业务账号不设计修改密码功能，由用户自服务功能实现；<br />
                6、暂停和删除状态的账务账号下属的业务账号不能被开通。</p>
                </div>                    
                <!--分页-->
                <div id="pages">
                    <a href="javascript:;"   @click="select(1,result.pageSize)">首页</a>
                    <a href="javascript:;"v-if="result.hasPreviousPage" @click="select(result.prePage,result.pageSize)">上一页</a>
                    <a href="javascript:;"v-if="!result.hasPreviousPage" @click="select(result.pageNum,result.pageSize)">上一页</a>

                    <a href="javascript:;" :class="result.pageNum ==pageNum ? 'current_page' : ''"
                       v-for="pageNum in result.navigatepageNums"
                       @click="select(pageNum,result.pageSize)" >{{pageNum}}</a>

                    <a href="javascript:;"v-if="result.hasNextPage" @click="select(result.nextPage,result.pageSize)">下一页</a>
                    <a href="javascript:;"v-if="!result.hasNextPage" @click="select(result.pageNum,result.pageSize)">下一页</a>

                    <a href="javascript:;" @click="select(result.pages,result.pageSize)">末页</a>
                </div>
            </form>
        </div>
    </body>
    <script type="text/javascript" src="js/service/index.js"></script>
    <script>
        function showDetail(boolean, el) {
            if (boolean == true) {
            $(el).next().show();
            }else if (boolean == false) {
                $(el).next().hide();
            }
        }
    </script>
</html>
